<template>
  <div id="craetFinsh">
    <header-lg bigTitle="CET-4" noteTitle="四级单词记忆管理"></header-lg>

    <div class="message">
      <p class="">真实姓名</p>
      <p><input type="text" placeholder="请输入姓名"></p>
      <p class="">注册手机号</p>
      <p><input type="text" placeholder="请输入注册手机号" onkeyup="this.value=this.value.replace(/^1[3,4,5,8,7]\d{9}$/,'')"></p>
      <p>性别</p>
      <ul>
        <li><div class="radioSm active" @click="activeRadio('1')" id="1">男</div></li>
        <li><div class="radioSm" @click="activeRadio('0')" id="0">女</div></li>
      </ul>
      <div class="clear"></div>
    </div>

    <div class="button-group">
      <nav-btn @click.native="toCreatSuccess" text="完成注册" backgroundName="orange" position=""></nav-btn>
    </div>
  </div>

</template>

<script>
  import Vue from 'vue'
  import VueResource from 'vue-resource'
  Vue.use(VueResource)
  import headerLg from '../components/header-lg.vue'
  import navBtn from '../components/nav-btn.vue'
  export default{
    name:'creatFinsh',
    data(){
      return{
        name:'',
        mobile:'',
        sex:'1'
      }
    },
    components:{headerLg,navBtn},
    methods:{
      activeRadio:function(id){
        let obj = document.getElementsByClassName('radioSm');
        for(let i = 0; i < obj.length; i++){
          obj[i].className = 'radioSm'
        }
        let element = document.getElementById(id);
        element.className = "radioSm active"
        this.sex = id;
      },
      toCreatSuccess:function(){
        if(this.name.length != 0 && this.mobile.length != 0){
          var formData = new FormData();
          formData.append('name',this.name);
          formData.append('sex',this.sex);
          formData.append('mobile',this.mobile);
          formData.append('examTime',this.examTime);
          formData.append('preExamDay',this.preExamDay);
        }
//        this.$http.post('http://'+this.$store.state.serverIp+
//          '/json/post_reguser.php',formData).then(function(response){
//           this.$router.push({path:'/creatSuccess'});
//        })
        this.$router.push({path:'/creatSuccess'});
      }
    }

  }
</script>

<style lang="less" scoped>
  @import '../assets/css/variables.less';
 .message{margin:20px;}
 p{margin:5px 0;width:100%;}
 input{
    width:95%;
    height:40px;
    border:1px solid #ddd;
    border-radius: 2px;
   margin-bottom:20px;
   padding:0 5px;
   outline-color: @green;
 }
  ul{
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
  }
  li{
    float: left;
    margin-right:20px;
    width:50px;
    height:50px;}
  div.radioSm{
    text-align: center;
    line-height: 50px;
    border:1px solid @green;
    border-radius: 2px;
  }
  .active{
    background:@green;
    color:@white;
  }
</style>
